﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery图片轮播特效的设计与实现</title>
		<link rel="stylesheet" href="css/ppt.css">
        <script src="js/jquery-3.6.1.min.js"></script>
    </head>
    <body>
	    <!--标题-->
        <h3>jQuery图片轮播特效的设计与实现</h3>
		<!--水平线-->
        <hr>
		<!--图片轮播区域-->
        <div class="ppt-container">
            <ul>
                <li>
				    <img src="image/ppt/1.jpg" />
					<p>云雾</p>		
                </li>
                <li class="hide">
				    <img src="image/ppt/2.jpg" />
					<p>莲池</p>
                </li>
                <li class="hide">
				    <img src="image/ppt/3.jpg" />
					<p>云海</p>
                </li>
            </ul>
			<!--按钮1，用于切换上一张图片-->
            <button id="btn01" onclick="last()">
               <img src="image/ppt/left.png" width="100%" height="100%" />
            </button>
			<!--按钮2，用于切换下一张图片-->
			<button id="btn02" onclick="next()">
                <img src="image/ppt/right.png" width="100%" height="100%" />
            </button>
        </div>
        <script>
		    //当前图片序号
            var index = 0;
            $(document).ready(function() {
                setInterval("next()", 8000);
            });

            //切换下一张图片
			function next() {
				//当前图片淡出
                $("li:eq(" + index + ")").fadeOut(1500);
				//判断当前图片序号是否为最后一张
                if (index == 2)
				    //如果是最后一张，序号跳转到第一张
                    index = 0;
                else
				    //否则图片序号自增1
                    index++;
				//新图片淡入
                $("li:eq(" + index + ")").fadeIn(1500);
            }
			//切换上一张图片
			function last() {
				//当前图片淡出
                $("li:eq(" + index + ")").fadeOut(1500);
				//判断当前图片序号是否为第一张
                if (index == 0)
				    //如果是第一张，序号跳转到最后
                    index = 2;
                else
                    //否则图片序号自减1
					index--;
				//新图片淡入
                $("li:eq(" + index + ")").fadeIn(1500);
            }
        </script>
	</body>
</html>
